const path = require('path');
const autoprefixer = require('autoprefixer');
const flexBugsFixes = require('postcss-flexbugs-fixes');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const cssRules = (env, test, cssOption = {}) => {
  const rules = [
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        minimize: true,
        sourceMap: env !== 'production',
        ...cssOption,
      }
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          flexBugsFixes,
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    'less-loader',
  ];
  if (env === 'production') {
    rules.unshift(MiniCssExtractPlugin.loader);
  } else {
    rules.unshift('style-loader');
  }
  return {
    test,
    use: rules
  };
};


module.exports = env => ({
  mode: env || 'development',
  devtool: false,
  target: 'electron-renderer',
  entry: [
    './app/index'
  ],
  output: {
    filename: 'dist/index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        enforce: 'pre',
        use: [
          {
            loader: 'eslint-loader',
            options: {
              eslintPath: 'eslint',
              baseConfig: {
                extends: ['eslint-config-react-app'],
              },
              ignore: false,
              useEslintrc: true,
            },
          },
        ],
      },
      {
        oneOf: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-react', '@babel/preset-env'],
                plugins: [
                  '@babel/plugin-proposal-object-rest-spread',
                  '@babel/plugin-proposal-class-properties'
                ]
              }
            }
          },
          cssRules(env, /^((?!\.module).)*\.less$/),
          cssRules(env, /\.module\.less$/, {
            modules: true,
            localIdentName: '[name]-[hash:base64:5]',
          }),
          {
            exclude: [/\.(jsx?)$/, /\.html$/, /\.json$/],
            loader: require.resolve('file-loader'),
            options: {
              name: 'dist/assets/[name].[hash:8].[ext]',
            },
          },
          {
            test: /\.(bmp|png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'dist/media/[name].[hash:8].[ext]',
            }
          },
        ]
      }
    ]
  },
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'app')
    ],
    extensions: ['.js', '.jsx', '.json'],
    mainFields: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },
  plugins: env === 'production' ? [
    new MiniCssExtractPlugin({
      filename: 'dist/css/[name].[contenthash:8].css',
    }),
  ] : []
});
